/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import store from '../redux/store'
import getCinemaListAction from '../actionCreator/getCinemaListAction'
export default function Cinemas(props) {
    const [cityName] = useState(store.getState().CityReducer.cityName)
    let navigator = useNavigate()
    const [list, setList] = useState(store.getState().CinemaListReducer.list)


    useEffect(() => {
        if (store.getState().CinemaListReducer.list.length === 0) {
            // 去后台区数据
            store.dispatch(getCinemaListAction())
        }
        else {
            console.log("store 缓存");
        }
        var unsubscribe=store.subscribe(() => {
            // 更新传入数据
            setList(store.getState().CinemaListReducer.list)
        })
        return ()=>{
            // 销毁
            unsubscribe()
        }
    }, [])
    return (
        <div>
            <div >
                <div style={{ overflow:'hidden' }}>
                    <span style={{ float: "left" }} onClick={() => { navigator(`/city`) }
            }>{cityName}</span>
                    <span style={{ float: "right" }} onClick={()=>navigator(`/films/search`)}>搜索</span>
                </div>
                <ul>
                    {
                        list.map(item =>
                            <dl key={item.cinemaId} >
                                <dt style={{fontSize:"16px"}}>{item.name}</dt>
                                <dd style={{color:"grey",fontSize:"12px"}}>{item.address}</dd>
                            </dl>
                        )
                    }
                </ul>
            </div>
        </div>
    )
}
